<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员-角色关系编辑</title>
    <link href="common/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="common/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="common/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="common/js/new_common.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">后台演示 </a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li><a href="./webSocket.html">webSocket测试</a></li>
                <li><a href="./editRole.html">角色</a></li>
                <li><a href="./editAdminRole.html">管理员-角色关系</a></li>
                <li><a href="./editAccess.html">权限</a></li>
                <li><a href="./editRoleAccess.html">角色-权限关系</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        管理员 <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="./admininfo.html">用户信息</a></li>
                        <li><a href="./logout.html">退出登录</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>


<table class="table table-striped">
    <caption>角色列表</caption>
    <thead>
    <tr>
        <th>管理员名称</th>
        <th>角色名称</th>
        <th>创建时间</th>
        <th>更改该角色</th>
        <th>删除该角色</th>
    </tr>
    </thead>
    <tbody id="list">

    </tbody>
</table>

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" id="adminBtn" data-toggle="dropdown">管理员
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" id="adminName"></ul>
</div>
<div class="btn-group" style="margin-left: 100px;">
    <button type="button" class="btn btn-primary dropdown-toggle" id="roleBtn" data-toggle="dropdown">角色
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" id="roleName"></ul>
</div>
<button class="btn btn-success" id="addBtn">添加</button>


<!-- 通用框（Modal） -->
<div class="modal fade" id="commonModal" tabindex="-1" role="dialog"
     aria-labelledby="commonModalLabel" aria-hidden="true" style=" z-index: 100000;">
    <div class="modal-dialog" style="margin-top: 12rem;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="commonModalLabel" style="text-align: center;">温馨提示</h4>
            </div>
            <div class="modal-body" id="commonModalBody" style="text-align: center;">
            </div>
            <div class="modal-footer" style="text-align: center;" id="commonModalSubmitCkeck"></div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->



<script>
    var type,admin_id,role_id;
    var adminList;
    var roleList;

    $(document).ready(function () {
        var strJson = {'type':'name'};
        var url = '../admin/index/editAdminRole';
        nameList(url,strJson); // 初始化管理员和角色的值
        showList(); // 展示管理员-角色列表
    });

    // 动态监听添加关系
    $(document).on('click','#addBtn',function(){
        type = 'add';
        var strJson = {'admin_id':admin_id,'role_id':role_id};
        var url = '../api/rbac/addAdminRole';
        ajaxSubmit(url,strJson);
    });

    /**
     * 展示管理员-角色列表
     */
    function showList(){
        type = 'list';
        var strJson = {'random':Math.random()};
        var url = '../api/rbac/listAdminRole';
        ajaxSubmit(url,strJson);
    }

    /**
     * 删除一条对应关系记录
     * 这个id是表 admin_role 的自动增长id
     */
    function deleteOne(id) {
        type = 'delete';
        var strJson = {'id':id};
        var url = '../api/rbac/deleteAdminRole';
        ajaxSubmit(url,strJson);
    }

    // 7. 将6获取的角色信息展示，并进行修改
    function updateOne(id,admin_name) {
        $('#commonModal').modal({keyboard: true});
        $("#commonModalLabel").html('更改角色');
        $("#commonModalBody").empty();
        $("#commonModalSubmitCkeck").empty();
        $("#commonModalBody").append(
            '<div class="btn-group">\n' +
            '    <span  id="uAdminBtn">\n' + admin_name+ '</span>\n' +
            '</div>\n' +
            '<div class="btn-group" style="margin-left: 100px;">\n' +
            '    <button type="button" class="btn btn-primary dropdown-toggle" id="uRoleBtn" data-toggle="dropdown">角色\n' +
            '        <span class="caret"></span>\n' +
            '    </button>\n' +
            '    <ul class="dropdown-menu" role="menu" id="uRoleName"></ul>\n' +
            '</div>');
        var htmlSubBtn = '<button type="button" class="btn btn-default" id="uSubmit" data-dismiss="modal">确定</button>';
        $("#commonModalSubmitCkeck").append(htmlSubBtn);

        showSelect('',$('#uRoleName'));

        var uRoleId;
        $('#uRoleName li a').bind('click',function () {
            $('#uRoleBtn').text($(this).text());
            uRoleId = $(this).next().text();
        });
        $('#uSubmit').bind('click',function () {
            type = 'update';
            var jsonStr = {'id':id,'role_id':uRoleId};
            var url = '../api/rbac/updateAdminRole';
            ajaxSubmit(url,jsonStr);
        });

    }

    function ajaxSubmit(url,strJson){
        $.ajax({
            url:url,
            type:'post',
            timeout:6000,
            async:true,
            beforeSend:function (XMLHttpRequest) {},
            cache:false,
            complete:function (XMLHttpRequest, textStatus) {},
            contentType:'application/x-www-form-urlencoded',
            data:strJson,
            dataType:'json',
            error:function (XMLHttpRequest, textStatus, errorThrow) {},
            global:true,
            ifModified:false,
            processData:true,
            success:function (result, textStatus) {
                var status = result.result === 'success';
                switch (type){
                    case 'list':
                        var listArr = [];
                        var list = result.data;
                        var listLength = list.length;
                        for(var i = 0;i < listLength; i++){
                            var html = ' <tr>\n' +
                                '        <td>'+list[i].admin_name+'</td>\n' +
                                '        <td>'+list[i].role_name+'</td>\n' +
                                '        <td>'+list[i].create_time+'</td>\n' +
                                '        <td style="color: green;" onclick="updateOne(\''+list[i].id+'\',\''+list[i].admin_name+'\')">更改</td>\n' +
                                '        <td style="color: red;" onclick="deleteOne(\''+list[i].id+'\')">删除</td>\n' +
                                '    </tr>';
                            listArr.push(html);
                        }
                        $('#list').empty();
                        $('#list').append(listArr.join(''));
                        break;
                    case 'add':
                    case 'delete':
                    case 'update':
                        if (status)
                            showList();
                        break;

                }

            }

        });
    }

    /**
     * 展示管理员列表；展示角色列表
     * @param url
     * @param strJson
     */
    function nameList(url,strJson){
        $.ajax({
            url:url,
            type:'post',
            timeout:6000,
            async:true,
            beforeSend:function (XMLHttpRequest) {},
            cache:false,
            complete:function (XMLHttpRequest, textStatus) {},
            contentType:'application/x-www-form-urlencoded',
            data:strJson,
            dataType:'json',
            error:function (XMLHttpRequest, textStatus, errorThrow) {},
            global:true,
            ifModified:false,
            processData:true,
            success:function (result, textStatus) {
                adminList = result.data.admin;
                roleList = result.data.role;

                showSelect($('#adminName'),$('#roleName'));
                listLiClick();

            }

        });
    }

    /**
     * 展示下拉框
     */
    function showSelect(adminNameObj, roleNameObj) {

        if(!checkEmptyValue(adminList)){
            var adminLength = adminList.length;
            if (adminNameObj) {
                var adminArr = [];
                for (var i = 0; i < adminLength; i++) {
                    var adminHtml =
                        '<li>' +
                        '<a href="#">' + adminList[i].name + '</a>' +
                        '<span style="display: none;">' + adminList[i].id + '</span>' +
                        '</li>';
                    adminArr.push(adminHtml);
                }
                adminNameObj.append(adminArr.join(''));
            }
        }

        if(!checkEmptyValue(roleList)){
            var roleLength = roleList.length;
            if (roleNameObj) {
                var roleArr = [];
                for (var k = 0; k < roleLength; k++) {
                    var roleHtml =
                        '<li>' +
                        '<a href="#">' + roleList[k].name + '</a>' +
                        '<span style="display: none;">' + roleList[k].id + '</span>' +
                        '</li>';
                    roleArr.push(roleHtml);
                }
                roleNameObj.append(roleArr.join(''));
            }
        }

    }

    /**
     * 监听界面选择管理员和角色，并给adminId和roleId赋值
     */
    function listLiClick() {
        $('#adminName li a').bind('click',function () {
            $('#adminBtn').text($(this).text());
            admin_id = $(this).next().text();
        });
        $('#roleName li a').bind('click',function () {
            $('#roleBtn').text($(this).text());
            role_id = $(this).next().text();
        });
    }

</script>

</body>
</html>

